import "./index.scss";
import classNames from "classnames";
import Icon from "@/components/Icon";
import { useMemo, useState } from "react";
import { billTypeToName } from '@/contants/index'

const DailyBill = ({billList = [], date}) => {
  const [visible, setVisible] = useState(false);

  const dayResult = useMemo(() => {
    return billList.reduce((pre, next) => {
        if(next.type === "pay") {
            pre.pay = pre.pay*1 + next.money*1
        } else if(next.type === "income") {
            pre.income = pre.income*1 + next.money*1
        }
        pre.total = next.money *1 + pre.total*1
        return pre;
    }, {pay: 0, income: 0, total: 0})
  }, [billList])

  return (
    <div className={classNames("dailyBill")}>
      <div className="header">
        <div className="dateIcon">
          <span className="date">{date}</span>
          {/* expand 有这个类名 展开的箭头朝上的样子 */}
          <span
            className={classNames("arrow", visible && "expand")}
            onClick={() => setVisible(!visible)}
          ></span>
        </div>
        <div className="oneLineOverview">
          <div className="pay">
            <span className="type">支出</span>
            <span className="money">{dayResult.pay.toFixed(2)}</span>
          </div>
          <div className="income">
            <span className="type">收入</span>
            <span className="money">{dayResult.income.toFixed(2)}</span>
          </div>
          <div className="balance">
            <span className="money">{dayResult.total.toFixed(2)}</span>
            <span className="type">结余</span>
          </div>
        </div>
      </div>
      {/* 单日列表 */}
      <div className="billList" style={{ display: visible ? "block" : "none" }}>
        {billList.map((item) => {
          return (
            <div className="bill" key={item.id}>
              {/* 图标 */}
              <Icon type={item.useFor} />
              <div className="detail">
                <div className="billType">{billTypeToName[item.useFor]}</div>
              </div>
              <div className={classNames("money", item.type)}>
                {item.money.toFixed(2)}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default DailyBill;
